<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     #hb{
      background-color: aqua;
  }
  </style>
 
</head>
<body>
  <canvas id="hb" width="400" height="400"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    var canvas=document.querySelector("#hb")//获取画布
    var ctx=canvas.getContext("2d")//获取画笔
    var a=0
    function Ball(x,y){
      this.x=x
      this.y=y
      this.hx=0
      
      this.hy=0
      this.draw=function(){
        // console.log(this.x);
        // console.log(this.hx);
        a++
        ctx.save()
        var color=ctx.createLinearGradient(this.x,this.y,this.x-20,this.y+20)
        color.addColorStop(0,"rgb(178,34,34)")
        color.addColorStop(1,"rgba(178,34,34,0.4)")
        ctx.strokeStyle=color
        ctx.clearRect(0,0,400,400)
        ctx.beginPath()
        ctx.lineWidth=4
        ctx.translate(this.hx,this.hy)
        ctx.rotate(Math.PI/180*a)
        
        console.log(this.hx);
        ctx.moveTo(this.x,this.y)
        // ctx.lineTo(this.x*Math.cos(this.x)+20,this.y*Math.cos(this.y)+20)
        ctx.lineTo(this.x-20,this.y+20)
        
        // ctx.arc(this.x,this.y,10,0,Math.PI*2)
        ctx.stroke()
        ctx.restore()
        ctx.closePath()
      }
      this.update=function(){
        // this.x
        // this.x+=1
        // this.y+=1
        this.draw()
      }
      
    }
    
    canvas.onmousemove=function(e){
      // for(var i=0;i<10;i++){
      //   ballArg[i].hx=e.pageX
      //   ballArg[i].hy=e.pageY
      //   ballArg.update()
      // }
       ball.hx=e.pageX
       ball.hy=e.pageY
       ballArg.update()
      // ball.hx = e.pageX - canvas.offsetLeft;
      // ball.hy = e.pageY - canvas.offsetTop;
      //  ctx.fillRect(0,0,50,50)
      //  console.log(ball.x);
      
    }
    // var ball=new Ball(20,20)
    var ballArg=[]
    for(var i=0;i<10;i++){
      var ball=new Ball(Math.random()*10,Math.random()*10)
      ballArg.push(ball)
    }
    function qou(){
      
      for(var i=0;i<10;i++){
        ballArg[i].update()
      }
      // ball.update()
      requestAnimationFrame(qou)
    }
    qou()
    // var i=0
    // var x=0
    // var y=0
    // function acc(){
    //   i++
    //   ctx.clearRect(0,0,400,400)
    // ctx.save()
    // ctx.beginPath()
    // ctx.fillStyle="rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")"
    // canvas.onmousemove=function(e){
    //   x=e.pageX
    //   y=e.pageY
    // }
    // console.log(x);
    //  ctx.translate(x,y)
    //   // ctx.translate(x,y)
    // ctx.rotate(Math.PI/180*i)
    // ctx.arc(100,0,5,0,Math.PI*2)
    // ctx.fill()
    // // console.log(111);
    // ctx.closePath()
    // ctx.restore()
    // requestAnimationFrame(acc)
    // }
    // acc()
  </script>
</body>
</html>